<template>
<div v-if='list.length>0'>
  <div v-for="(item,index) in list" :key='index'>
      <div class="item">
        <input type="checkbox" v-model="item.complete">
        {{item.title}}
        <button class="del" @click="del(item,index)">删除</button>
      </div>
    </div>
</div>
<div v-else>
  暂无任务
</div>
  
</template>
<script>
import {defineComponent,ref} from 'vue'
export default defineComponent({
  name:'navMain',
  //父传子
  props:{
    list:{
      type:Array,
      required:true
    }
  },
  //放分发事件的属性名字
  emits:['del'],
  setup(props,ctx){
    

    // let list=ref([
    //   {
    //     title:'吃饭',
    //     complete:'false'
    //   },
    //   {
    //     title:'读书',
    //     complete:'false'
    //   },
    //   {
    //     title:'写字',
    //     complete:'false'
    //   },
    // ])
    //删除任务
    let del=(item,index)=>{
      ctx.emit('del',index)
      // console.log(item);
      // console.log(index);
    }
    return {
      del
    }
  }
})
</script>
<style scoped lang='scss'>
    .item{
      width: 160px;
      height: 35px;
      line-height: 35px;
      position: relative;
      cursor: pointer;
      button{
        position: absolute;
        right: 20px;
        top: 6px;
        display: none;
        z-index: 99;
      }
      &:hover{
        background: #ddd;
        button{
          display: block;
        }
      }
    }
</style>
